.key_search_music_list_box {
  height: 100%;
  width: 100%;
  
}
.key_search_music_list {
  max-width: 1330px;
  margin: 0 auto;
  height: 100%;
  padding-top: 50px;
  .top {
    width: 100%;
    max-height: 200px;
    display: flex;
    padding-left: 40px;
    .top_img_box {
      min-width: 173px;
      max-width: 173px;
      height: 173px;
      overflow: hidden;
      border-radius: 5px;
      img {
        width: 100%;
      }
    }
    .info {
      margin-left: 27px;
      max-width: 970px;
      .song_list_name {
        font-size: 20px;
        line-height: 24px;
        font-weight: bold;
      }
      .description {
        margin-top: 15px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
      }
      .tags {
        margin-top: 10px;
        span {
          margin-right: 10px;
        }
      }
    }
  }
  .music_data_list {
    margin-top: 50px;
    width: 100%;
    padding-left: 10px;
    .music_data_title {
      height: 50px;
      line-height: 50px;
      font-size: 13px;
      color: #999;
      display: flex;
      div{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
      }
      .music_data_index {
        width: 2%;
      }
      .music_data_name {
        width: 50%;
      }
      .music_data_artists {
        width: 20%;
      }
      .music_data_album {
        width: 20%;
      }
      .music_data_duration {
        width: 8%;
      }
    }
    .music_data_data {
      font-size: 13px;
      display: flex;
      height: 50px;
      line-height: 50px;
      border-radius: 5px;
      transition: all .4s;
      div{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
      }
      .music_data_index {
        width: 2%;
        color: #999;
      }
      .music_data_name {
        position: relative;
        width: 50%;
        display: flex;
        .music_icon {
          position: absolute;
          right: 0;
          z-index: 10;
          .music_play_icon {
            margin-right: 10px;
            cursor: pointer;
            color: #31c27c;
            display: none;
            span {
              font-size: 23px;
              font-weight: inherit;
            }
          }
        }
      }
      .music_data_artists {
        width: 20%;
      }
      .music_data_album {
        width: 20%;
      }
      .music_data_duration {
        width: 8%;
      }
      &:hover {
        background-color:  rgba(153, 153, 153, .5);
      }
      &:hover .music_data_name .music_play_icon {
        display: inline-block;
      }
    }
  }
}
@media screen and (max-width: 800px) {

  .key_search_music_list {
    padding-top: 20px;
    .top {
      width: 100%;
      max-height: 200px;
      display: flex;
      padding: 0 10px;
      .top_img_box {
        min-width: 133px;
        max-width: 133px;
        height: 133px;
        overflow: hidden;
        border-radius: 5px;
        img {
          width: 100%;
        }
      }
      .info {
        margin-left: 17px;
        max-width: 970px;
        .song_list_name {
          font-size: 16px;
          line-height: 24px;
          font-weight: bold;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .description {
          font-size: 12px;
          margin-top: 1px;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 4;
          line-clamp: 4;
          -webkit-box-orient: vertical;
        }
        .tags {
          margin-top: 10px;
          font-size: 12px;
          span {
            font-size: 12px;
            margin-right: 10px;
          }
        }
      }
    }
    .music_data_list {
      margin-top: 20px;
      width: 100%;
      padding-left: 10px;
      font-size: 12px;
      .music_data_title {
        .music_data_index {
          width: 2%;
          display: none;
        }
        .music_data_name {
          width: 48%;
        }
        .music_data_artists {
          width: 20%;
        }
        .music_data_album {
          width: 20%;
        }
        .music_data_duration {
          width: 12%;
        }
      }
      .music_data_data {
        font-size: 12px;
        display: flex;
        height: 50px;
        line-height: 50px;
        border-radius: 5px;
        transition: all .4s;
        .music_data_index {
          width: 2%;
          color: #999;
          display: none;
        }
        .music_data_name {
          position: relative;
          width: 48%;
          display: flex;
          padding-right: 50px;
          .music_data_name_box {
            max-width: 130px;
          }
          .music_icon {
            .music_play_icon {
              margin-right: 8px;
              cursor: pointer;
              color: #31c27c;
              display: inline-block;
              span {
                font-size: 19px;
              }
            }
          }
        }
        .music_data_artists {
          width: 20%;
        }
        .music_data_album {
          width: 20%;
        }
        .music_data_duration {
          width: 12%;
        }
      }
    }
  }
}